<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form layui-form-pane" id="table_forms">
            <!-- 表信息 -->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">表名</label>
                    <div class="layui-input-block">
                        <input type="text" name="table" autocomplete="off" class="layui-input" value="{$find.table}">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">注释</label>
                    <div class="layui-input-inline">
                        <input type="text" name="COMMENT" autocomplete="off" class="layui-input"
                            value="{$find.COMMENT}">
                    </div>
                </div>
            </div>
            <div class="layui-tab layui-tab-brief" lay-filter="tabCard">
                <ul class="layui-tab-title">
                    <li class="layui-this">字段属性</li>
                    <li>表单属性</li>
                    <li>索引</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <!-- 字段属性表 -->
                        <div class="field_table">
                            <a class="layui-btn layui-btn-sm add-table">
                                <i class="layui-icon layui-icon-addition"></i>新增
                            </a>
                            <table class="layui-table">
                                <thead>
                                    <tr>
                                        <th lay-data="{field:'field_name', minWidth:80}">字段名称</th>
                                        <th lay-data="{field:'field_comment', minWidth:80}">字段备注</th>
                                        <th lay-data="{field:'field_type', minWidth:150}">字段类型</th>
                                        <th lay-data="{field:'field_length', minWidth:80}">长度/值</th>
                                        <th lay-data="{field:'field_default', minWidth:80}">默认值</th>
                                        <th lay-data="{minWidth: 80}">操作</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <!-- 表单属性表 -->
                        <script type="text/html" id="field_control_select">
                            <select name="field_control[]" class="layui-border" lay-ignore> 
                                <option value="input">文本框</option>
                                <option value="inputNumber">数字文本框</option>
                                <option value="textArea">多行文本</option>
                                <option value="uploadFile">文件上传</option>
                                <option value="datePicker">日期选择</option>
                                <option value="dateTimePicker">日期时间选择</option>
                                <option value="select">下拉单选</option>
                                <option value="selectMulti">下拉多选</option>
                                <option value="treeSelect">树形单选</option>
                                <option value="treeSelectMulti">树形多选</option>
                            </select>
                        </script>
                        <script type="text/html" id="field_search_type">
                            <select name="field_search_type[]" class="layui-border" lay-ignore>
                                <option value="normal">普通查询</option>
                                <option value="like">模糊查询</option>
                                <option value="between">范围查询</option>
                                <option value="timeBetween">时间范围查询</option>
                            </select>
                        </script>
                        <table class="layui-hide" id="form_table" lay-filter="form_table"></table>
                    </div>
                    <div class="layui-tab-item">
                        <!-- 索引表 -->
                        <div class="index_table">
                            <a class="layui-btn layui-btn-sm add-index">
                                <i class="layui-icon layui-icon-addition"></i>新增
                            </a>
                            <table class="layui-table">
                                <thead>
                                    <tr>
                                        <th lay-data="{field:'field_name', minWidth:150}">索引名称</th>
                                        <th lay-data="{field:'index_fields', minWidth:150}">索引字段</th>
                                        <th lay-data="{field:'index_type', minWidth:150}">索引类型</th>
                                        <th lay-data="{minWidth: 80}">操作</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    layui.use(["jquery", "table", "form", "common", "xmSelect", "element", "layer"], function () {
        let $ = layui.$;
        let table = layui.table;
        let form = layui.form;
        let common = layui.common;
        let xmSelect = layui.xmSelect;
        let element = layui.element;
        let layer = layui.layer;
        let winIndex = 0;
        let winKey = 0;

        // 字段属性
        let objech = {
            data: [],
            index: []
        }

        // 创建渲染实例
        let field_table = function (type = "all") {
            let add = [
                {
                    id: winIndex,
                    field_name: "",
                    field_comment: "",
                    field_type: "",
                    field_length: "",
                    field_default: "",
                    field_control: "",
                    field_param: "",
                    field_table: 0,
                    field_list: 1,
                    field_px: 1,
                    field_search: 1,
                    field_search_type: ""
                }
            ]
            let fordata = objech.data
            if (type != "all") {
                fordata = add
            }
            // 渲染
            fordata.forEach((item, index) => {
                $(".field_table tbody").append(`
                <tr>
                    <td><input type="text" name="field_name[]" class="layui-input" data-index="${item.id}" value="${item.field_name}"></td>
                    <td><input type="text" name="field_comment[]" class="layui-input" data-index="${item.id}" value="${item.field_comment}"></td>
                    <td>
                        <div id="field_type_${item.id}"></div>
                    </td>
                    <td><input type="text" name="field_length[]" class="layui-input" value="${item.field_length}"></td>
                    <td><input type="text" name="field_default[]" class="layui-input" value="${item.field_default}"></td>
                    <td>
                        <a class="layui-btn layui-btn-sm layui-bg-red del" data-index="${item.id}">
                            <i class="layui-icon layui-icon-delete"></i>删除
                        </a>
                    </td>
                </tr>
                `);
                let xm = xmSelect.render({
                    el: '#field_type_' + item.id,
                    autoRow: true,
                    model: { type: 'fixed' },
                    filterable: true,
                    layVerify: "required",
                    radio: true,
                    initValue: [item.field_type],
                    name: "field_type[]",
                    data: [
                        { name: 'varchar', value: "varchar" },
                        { name: 'bigint', value: "bigint" },
                        { name: 'int', value: "int" },
                        { name: 'longtext', value: "longtext" },
                        { name: 'tinyint', value: "tinyint" },
                        { name: 'set', value: "set" },
                        { name: 'enum', value: "enum" },
                        { name: 'text', value: "text" },
                    ],
                    create: function (val, arr) {
                        return {
                            name: val,
                            value: val
                        }
                    }
                })
                item.__xm = xm;
                winIndex++
                form.render()
            })
        }
        field_table();
        // 添加
        $(".add-table").on("click", function () {
            winIndex++
            objech.data.push({
                id: winIndex,
                field_name: "",
                field_comment: "",
                field_type: "",
                field_length: "",
                field_default: "",
                field_control: "",
                field_param: "",
                field_table: 2,
                field_list: 1,
                field_px: 1,
                field_search: 1,
                field_search_type: ""
            })
            field_table("push")
            table.reloadData("form_table", {
                data: objech.data
            })
        })
        // 删除
        $("body").delegate(".field_table tbody .del", "click", function () {
            let index = $(this).attr("data-index")
            objech.data.forEach((item, i) => {
                if (item.id == index) {
                    objech.data.splice(i, 1)
                }
            })
            $(this).parent().parent().remove()
            table.reloadData("form_table", {
                data: objech.data
            })
        })

        // 监听
        $("body").delegate(".field_table tbody input", "change", function () {
            let name = $(this).attr("name");
            let id = $(this).attr("data-index");
            if (name == "field_name[]" || name == "field_comment[]") {
                objech.data.forEach((item, i) => {
                    if (item.id == id) {
                        item[name.replace("[]", "")] = $(this).val()
                    }
                })
                table.reloadData("form_table", {
                    data: objech.data
                })
            }
        });

        table.render({
            elem: '#form_table',
            data: objech.data,
            css: [ // 设置单元格样式
                '.layui-table-cell select{height: 36px; padding: 0 5px;}'
            ].join(''),
            cols: [[
                { field: 'field_name', title: '字段名称' },
                { field: 'field_comment', title: '字段备注' },
                {
                    field: 'field_control', minWidth: 150, title: '控件类型', templet: '#field_control_select'
                },
                {
                    field: 'field_param', title: '控件参数',
                    templet: `<input type="text" name="field_param[]" placeholder="json格式" class="layui-input" value="{{= d.field_param || '' }}">`
                },
                {
                    field: 'field_table', title: '表单显示',
                    templet: `<select name="field_table[]" class="layui-border" lay-ignore>
                                <option value="1" {{= d.field_table==1?'selected':'' }}>显示</option>
                                <option value="0" {{= d.field_table==0?'selected':'' }}>隐藏</option>
                            </select>`
                },
                {
                    field: 'field_list', title: '列表显示',
                    templet: `<select name="field_list[]" class="layui-border" lay-ignore>
                                <option value="1" {{= d.field_list==1?'selected':'' }}>显示</option>
                                <option value="0" {{= d.field_list==0?'selected':'' }}>隐藏</option>
                            </select>`
                },
                {
                    field: 'field_px', title: '支持排序',
                    templet: `<select name="field_px[]" class="layui-border" lay-ignore>
                                <option value="1" {{= d.field_px==1?'selected':'' }}>排序</option>
                                <option value="0" {{= d.field_px==0?'selected':'' }}>不排</option>
                            </select>`
                },
                {
                    field: 'field_search', title: '支持查询',
                    templet: `<select name="field_search[]" class="layui-border" lay-ignore>
                                <option value="1" {{= d.field_search==1?'selected':'' }}>查询</option>
                                <option value="0" {{= d.field_search==0?'selected':'' }}>不查</option>
                            </select>`
                },
                {
                    field: 'field_search_type', title: '查询类型', minWidth: 150, templet: '#field_search_type'
                }
            ]],
            cellMinWidth: 80,
            skin: "line",
            size: "lg",
            page: false,
        });

        // 创建渲染实例
        let indexTtable = function (type = "all") {
            if (objech.data.length == 0) {
                layer.msg("请先添加字段")
                return
            }
            let data = [{ id: winKey, index_name: "", index_fields: "" }];
            if (type == "all") {
                data = objech.index
            }
            data.forEach((item, index) => {
                $(".index_table tbody").append(`
                    <tr>
                        <td><input type="text" name="index[index_name][]" class="layui-input" value="${item.index_name}"></td>
                        <td>
                            <div id="index_fields_${item.id}"></div>
                        </td>
                        <td>
                            <select name="index[index_type][]" class="layui-border">
                                <option value="normal">normal</option>
                                <option value="unique">unique</option>
                            </select>
                        </td>
                        <td><button type="button" class="layui-btn layui-bg-red del" data-index="${item.id}">删除</button></td>
                    </tr>`);
                let xm = xmSelect.render({
                    el: '#index_fields_' + item.id,
                    autoRow: true,
                    model: { type: 'fixed' },
                    filterable: true,
                    layVerify: "required",
                    initValue: [item.index_fields],
                    name: "index[index_fields][]",
                    data: objech.data,
                    prop: {
                        name: "field_name",
                        value: "field_name"
                    }
                })
                item.__xm = xm;
                winKey++
                form.render()
            })
        }
        $(".add-index").on("click", function () {
            indexTtable("add")
        })
        // 删除
        $("body").delegate(".index_table tbody .del", "click", function () {
            let index = $(this).attr("data-index")
            objech.index.forEach((item, i) => {
                if (item.id == index) {
                    objech.index.splice(i, 1)
                }
            })
            $(this).parent().parent().remove()
        })

    })
</script>